<!DOCTYPE html>
<html xmlns:ui='http://java.sun.com/jsf/facelets' 
	  xmlns:h='http://java.sun.com/jsf/html'
      xmlns:f='http://java.sun.com/jsf/core' lang='en'>
<body>
<ui:composition template='snippets/template.xhtml'>

	<ui:define name='title'>Umrechner</ui:define>
	<ui:define name='msgs'><h:outputText value='#{ ErrorHandler.errors }' escape='false' /></ui:define>
	<ui:define name='content'>
		<h2>Umrechnen</h2>
		<f:view>
			<h:messages layout='table' styleClass='table' />
			<h:form>
				<table>
					<colgroup>
						<col width='30%' />
						<col width='40%' />
						<col width='30%' />
					</colgroup>
					<tr>
						<td>Messgrösse: </td>
						<td>
							<h:selectOneMenu id='measurand' value='#{ IndexBean.measurand }'>
								<f:selectItems value='#{ IndexBean.measurandList }' />
							</h:selectOneMenu>
						</td>
						<td align='right'>
							<h:commandButton action='#{ IndexBean.changeMeasurand }' value='Messgrösse wechseln' />
						</td>
					</tr>
				</table>
				<table>
					<colgroup>
						<col width='30%' />
						<col width='70%' />
					</colgroup>
					<tr>
						<td>Von Einheit: </td>
						<td>
							<h:selectOneMenu id='fromUnit' value='#{ IndexBean.fromUnit }'>
		   						<f:selectItems value='#{ IndexBean.unitList }'/>
							</h:selectOneMenu>
						</td>
					</tr>
					<tr>
						<td>Anzahl: </td>
						<td>
							<h:inputText id='amount' value='#{ IndexBean.amount }' required='true' size='15'> 
			    				<f:validateLength minimum='1' maximum='30' />
			   				 </h:inputText>
						</td>
					</tr>
					<tr>
						<td>Nach Einheit: </td>
						<td>
							<h:selectOneListbox id='toUnit' value='#{ IndexBean.toUnit }' size='1'>
		   						<f:selectItems value='#{ IndexBean.unitList }'/>
							</h:selectOneListbox>
						</td>
					</tr>
					
					<tr>
						<td>Resultat: </td>
						<td>
							<span>
								<h:outputText id='result' value='#{ IndexBean.result }'>
									
								</h:outputText>
							</span>
						</td>
					</tr>
					
					<tr>
						<td colspan='2' align='right'>
							<!-- <h:inputText id='measurand' value='#{ IndexBean.measurand }' required='true' /> -->
							<h:commandButton action='#{ IndexBean.process }' value='Umrechnen' />
						</td>
					</tr>
				</table>
			</h:form>
		</f:view>
	</ui:define>
</ui:composition>
</body>
</html>